<template>
  <div>
      <MyHeader />
      <div class="titleBg">
          变更前的经营范围信息
      </div>
      <table class="tbstyle" width="100%">
          <tr>
              <td class="tbstyle_left">经营范围</td>
              <td>技术开发、技术服务、技术转让、科技信息咨询服务。</td>
          </tr> 
          <tr>
              <td class="tbstyle_left">许可信息</td>
              <td>国际海上运输业务及海运辅助业务经营（交通运输部）</td>
          </tr> 
      </table>  
      <div class="titleBg">
          变更后的经营范围信息
      </div>
      <table class="tbstyle" width="100%">
          <tr>
              <td class="tbstyle_left">经营范围</td>
              <td>{{form.desc1}};{{form.desc2.join(';')}}
                <Input style="margin-top:0.3rem;" v-model="form.desc3"  type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="Enter something..."></Input>
              </td>
          </tr> 
      </table> 
      <div class="addText"><span @click="modal1=true">添加后置许可经营用语</span></div> 
      <div class="textList">
          <span class="textspan" v-for="(item, index) in form.desc2" :key="index">{{item}}<span @click="remove(index)" class="close"><Icon type="close-circled"></Icon></span></span>
      </div>  
      <div class="tipFont">温馨提示：经营范围中如果涉及前置许可，需到网上或者现场办理。</div>
      <div class="baseinfo_bottom">
        <div class="bottom">
            <Button type="warning" @click="saveInfo()">保存</Button>
            <Button type="primary" @click="gotoNext()">下一步</Button>
        </div>
         <MyFooter />
     </div>

    <Modal
        v-model="modal1"
        :styles="{top: '8%'}"
        title="后置许可经营用语"
        @on-ok="ok">
        <Input v-model="text" placeholder="请输入关键字检索经营范围表述" >
         <Button @click="search" slot="append" type="primary">搜索</Button>
        </Input>
        <div style="height:12rem;overflow:auto;">
            <div class="searchList" v-for="(item, index) in searchList" :key="index" @click="changeClass($event,index)">
                经营范围：<span v-html='item.name'></span><br/>
                许可机关：{{item.company}}<br/>
                许可事项：{{item.remark}}
            </div>
        </div>
        
    </Modal>
  </div>
</template>

<script>
import MyHeader from '../../components/MyHeader2.vue'
import MyFooter from '../../components/MyFooter.vue'
import request from '../../utils/request'
export default {
  data() {
    return {
       form:{
         desc1:"国际船舶运输管理",
         desc2:['提供互联网上网服务场所','广告设计'],
         desc3:"技术开发、技术服务、技术转让、科技信息咨询服务。"
       },
       modal1:false,
       text:"出国留学",
       searchList:[
         {
           name:'自费出国留学服务',
           company:'教育行政主管部门',
           remark:'自费出国留学中介服务'
         },
         {
           name:'国家赞助出国留学服务',
           company:'教育行政主管部门',
           remark:'自费出国留学中介服务'
         },
         {
           name:'第三方出国留学服务',
           company:'教育行政主管部门',
           remark:'自费出国留学中介服务'
         }
       ],
    }
  },
  components: {
    MyHeader,
    MyFooter
  },
  methods: {
    changeClass(e,index){
      if(e.target.className=='searchList'){
        e.target.className='searchActive'
        this.form.desc2.push(this.searchList[index].name);
      }else{
        e.target.className='searchList'
        for(var i = 0; i < this.form.desc2.length; i++) {
          if(this.form.desc2[i] == this.searchList[index].name) {
          this.form.desc2.splice(i, 1);
          break;
          }
        }
      }
    },
    remove(index){
      this.form.desc2.splice(index, 1)
    },
    search(){
      if(this.text.length>0){

      }else{
        this.$Message.warning('请先填写关键字再搜索');
      }
    },
    ok () {
       this.$Message.info('Clicked ok');
     },
    save(isNext) {
       this.$router.push('/changeComTerm');
    },
    saveInfo() {
      this.save(false)
    },
    gotoNext() {
      this.save(true)
    }
  },
  mounted() {
   
  }
}
</script>
<style lang="scss">
.titleBg {font-size:0.57rem;padding:0.5rem;}
.tbstyle {font-size:0.5rem;border-collapse: collapse;}
.tbstyle td {border:1px solid #BFE5F5;font-size:0.5rem;padding: 0.5rem;}
.tbstyle .tbstyle_left {background:#F5FAFD;color:#2D8CF0;white-space: nowrap}
.red {color:#c00;}
.baseinfo_bottom {
    padding:0.5rem;
  }
  .bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
.ivu-input-group-append {
  background:#2d8cf0;
  border-color: #2d8cf0;
  color:#fff;
}
.searchList,.searchActive {
  background:url(../../assets/img/uncheckbox.png) no-repeat left center;
  background-size:0.8rem auto;
  padding-left:1.1rem;
  border-bottom:1px solid #eaeaea;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.searchActive {
  background:url(../../assets/img/checkbox.png) no-repeat left center;
  background-size:0.8rem auto;
}
.textList {
  padding:0rem 0.5rem 0rem 0.5rem;
}
.textList .textspan {
background:#FC9800;
border-radius: 5px;
color:#fff;
margin:0.3rem;
display:inline-block;
height:1.2rem;
line-height:1.2rem;
padding-left:0.4rem;
}
.textList .close {
  background:#CB891A;
  border-radius: 5px;
  display:inline-block;
height:1.2rem;
width:1.2rem;
text-align: center;
line-height:1.2rem;
margin-left:0.4rem;
font-size: 0.6rem;
}
.tipFont {font-size:0.5rem;color:#666;padding:0.2rem 0.5rem 0rem 0.5rem;}
.addText {text-decoration:underline;font-size:0.5rem;color:#2D8CF0;padding:0.5rem 0.5rem 0.2rem 0.5rem;text-align:right;}
</style>

